<template>
  <view class="back-page">
    <image
      src="/static/login-bg.jpg"
      style="position: absolute; width: 100%; height: 100%; z-index: 0;"
      mode="aspectFill"
    ></image>
    <view class="space-blank"></view>
    <view class="main-login" style="z-index: 200;">
      <view class="login-title" style="z-index: 201;">管理员登录</view>
      <form @submit="adminLoginSubmit" style="z-index: 201;">
        <view class="input-info" style="z-index: 202;">
          <view class="inline-text" style="z-index: 203;">管理员</view>
          <input class="inline-text" type="text" name="adminName" style="z-index: 203;" />
          <view class="inline-text"  style="z-index: 203;">密码</view>
          <input class="inline-text" type="password" name="password"  style="z-index: 203;" />
        </view>
        <button form-type="submit" type="primary">登录</button>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    adminLoginSubmit: function (ev) {
      let adminName = ev.detail.value.adminName,
        password = ev.detail.value.password;
      // console.log(adminName, password);
      let postData = {
        option: "signIn",
        admin_id: adminName,
        password: password,
      };
      uni.showLoading({ title: "登陆中" });
      this.$http
        .post(this.$api.admin, postData)
        .then((res) => {
          uni.hideLoading();
          let status = res.data.status;
          switch (status) {
            case "100": {
              // uni.showToast("登录成功");
              uni.switchTab({
                url: "/pages/admin/adminUser"
              })
              break;
            }
            case "101": {
              alert("登录失败!请检查账号和密码!");
              break;
            }
          }
        })
        .catch((err) => {
          uni.hideLoading();
          console.log(err);
          alert("登录请求失败");
        });
    },
  },
};
</script>

<style>
.space-blank {
  width: 100%;
  height: 250px;
}
.main-login {
  max-width: 400px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  box-shadow: 0 0 40px lightgray;
  z-index: 200;
}
.input-info {
  margin: auto;
  width: 100%;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: auto auto;
}
.inline-text {
  font-size: 24px;
  padding: 5px;
  margin: 10px;
}
uni-input {
  border: grey 1px solid;
  font-size: 1em;
  border-radius: 5px;
}
.login-title {
  text-align: center;
  font-size: 28px;
  background-color: white;
}
uni-page-body {
  background: none !important;
}
</style>